<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>会员等级</title>
  <script src="../../js/li_ting/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../../js/li_ting/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../js/li_ting/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src="../../js/li_ting/data.js"></script>
  <link rel="stylesheet" href="../../icon/li_ting/font_jx87dhu51k/iconfont.css">
  <script src="../../icon/li_ting/font_jx87dhu51k/iconfont.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 100%;
      height: 100%;
    }

    #top {
      width: 80%;
      position: absolute;
      left: 10%;
      top: 5%;
    }

    #myTable {
      width: 80%;
      margin: auto;
      position: absolute;
      top: 20%;
      left: 10%;
    }

    th {
      height: 40px;
      background-color: #f4f4f4;
      position: relative;
      text-align: center;
      line-height: 40px;
    }

    td {
      text-align: center;
    }

    #sp1 {
      position: absolute;
      right: 0;
      top: 0;
    }

    #changeUl td {
      padding: 15px;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="top">
      <h4>会员等级（共三条）</h4>
      <hr />
    </div>
    <table class="table table-bordered" id="myTable">
      <thead>
        <th>
          <span>排序</span><span class="icon iconfont" id="sp1" data-toggle="modal" data-target="#notes">&#xe615;</span>
          <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="notes">
            <div class="modal-dialog modal-sm" role="document">
              <div class="modal-content">
                <h3>说明</h3>
                <p>默认等级从低到高</p>
              </div>
            </div>
          </div>
        </th>
        <th>等级名称</th>
        <th>升级规则</th>
        <th>金额</th>
        <th>卡位数量</th>
        <th>卡位金额</th>
        <th>返佣比例</th>
        <th>目前等级人数</th>
        <th>操作</th>
      </thead>
      <tbody id="myBody"></tbody>
    </table>
  </div>
  <script>
    showTable();

    function showTable() {
      $("#myBody").html('');
      for (let i = 0; i < memLevelsList.length; i++) {
        console.log(memLevelsList[i].id)
        let changeId = memLevelsList[i].id;
        $("#myBody").append(
          `<tr>
                    <td id='changeId'>${memLevelsList[i].id}</td>
                    <td>${memLevelsList[i].hyName}</td>
                    <td>${memLevelsList[i].upgradeRules}</td>
                    <td>${memLevelsList[i].upgradeMoney}</td>
                    <td>${memLevelsList[i].cardNumber}</td>
                    <td>${memLevelsList[i].cardMoney}</td>
                    <td>${memLevelsList[i].rebateRatio}</td>
                    <td>${memLevelsList[i].nowPeople}</td>
                    <td>
                      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#hyChange" id='changeBtn'>编辑</button>
                      <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id='hyChange'>
                          <div class="modal-dialog modal-lg" role="document">
                              <div class="modal-content">
                                  <h4>编辑等级${i}</h4>
                                  <hr>
                                  <table id='changeUl'>
                                      <tr>
                                          <td><span>*等级名称</span></td>
                                          <td><div class="input-group">
                                              <span class="input-group-addon" id="sizing-addon2">@</span>
                                              <input type="text" class="form-control ip1" placeholder="hyName" id='hyNameInput' aria-describedby="sizing-addon2">
                                              </div> 
                                          </td>                                        
                                      </tr>
                                      <tr>
                                          <td><span>*升级规则</span></td>
                                          <td>
                                            <span>一次性购买</span><span class="icon iconfont" id="sp2" data-toggle="modal" data-target="#notes2">&#xe615;</span>
                                            <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="notes2">
                                                <div class="modal-dialog modal-sm" role="document">
                                                  <div class="modal-content">
                                                    <h3>说明</h3>
                                                    <hr>
                                                    <h5>不可更改</h5>
                                                  </div>
                                                </div>
                                            </div>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td><span>*金额</span></td>
                                          <td>
                                              <div class="input-group">
                                                  <span class="input-group-addon" id="sizing-addon2">@</span>
                                                  <input type="text" class="form-control ip1" placeholder="upgradeMoney" id='upgradeMoneyInput' aria-describedby="sizing-addon2">
                                              </div>  
                                          </td>
                                      </tr>
                                      <tr>
                                          <td><span>*卡位数量</span></td>
                                          <td>
                                              <div class="input-group">
                                                  <span class="input-group-addon" id="sizing-addon2">@</span>
                                                  <input type="text" class="form-control ip1" placeholder="cardNumber" id='cardNumberInput' aria-describedby="sizing-addon2">
                                              </div>  
                                          </td>
                                      </tr>
                                      <tr>
                                          <td><span>*卡位金额</span> </td>
                                          <td>
                                              <div class="input-group">
                                                  <span class="input-group-addon" id="sizing-addon2">@</span>
                                                  <input type="text" class="form-control ip1" placeholder="cardMoney" id='cardMoneyInput' aria-describedby="sizing-addon2">
                                              </div>  
                                          </td>
                                      </tr>
                                      <tr>
                                        <td><span>*返佣比例</span> </td>
                                          <td>
                                              <div class="input-group">
                                                  <span class="input-group-addon" id="sizing-addon2">@</span>
                                                  <input type="text" class="form-control ip1" placeholder="rebateRatio" id='rebateRatioInput' aria-describedby="sizing-addon2">
                                              </div>  
                                          </td>
                                      </tr>  
                                  </table>
                                  <hr>
                                  <button type="button" class="btn btn-default" id='qxChange'>取消</button>
                                  <button type="button" class="btn btn-primary" id='qdChange'>确定</button>
                              </div>
                          </div>                 
                       </div>
                    </td>
                </tr> `
        );
      }
    }

    // hyName:'一级',
    // upgradeMoney:199,
    // cardNumber:5,
    // cardMoney:100,
    // rebateRatio:'50%',


    // 取消按钮
    $('#qxChange').click(function () {
      $('#hyChange').modal('hide')
    })
    // 确定按钮
    $('#qdChange').click(function () {
      let hyNameInput = $('#hyNameInput').val();
      let upgradeMoneyInput = $('#upgradeMoneyInput').val();
      let cardNumberInput = $('#cardNumberInput').val();
      let cardMoneyInput = $('#cardMoneyInput').val();
      let rebateRatioInput = $('#rebateRatioInput').val();
      memLevelsList[0].hyName = hyNameInput;
      memLevelsList[0].upgradeMoney = upgradeMoneyInput;
      memLevelsList[0].cardNumber = cardNumberInput;
      memLevelsList[0].cardMoney = cardMoneyInput;
      memLevelsList[0].rebateRatio = rebateRatioInput;
      $('#hyChange').modal('hide')
      showTable();
    })
  </script>
</body>

</html>